<template>
    <div class="login">
        <div class="title">
            <img src="../assets/logo.jpg" alt="" srcset="">
            <div class="user_name">北朔</div>
        </div>
        <div class="form">
            <div class="tips">登录到北朔管理后台</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="ruleForm.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input show-password v-model="ruleForm.pwd" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-button class="submit" :loading='loading' type="primary" @click="submitForm('ruleForm')">登录</el-button>
            </el-form>
            
        </div>
        <!--验证弹窗-->
        <el-dialog
            title='登录验证'
            :close-on-click-modal='false'
            :visible.sync="dialogVisible"
            width="350px">
            <slide-verify 
            :l="42"
            :r="10"
            :w="310"
            :h="155"
            ref="slideblock"
            @success="onSuccess"
            :slider-text="text"
            ></slide-verify>
        </el-dialog>
    </div>
</template>
<script>

export default {
    data(){
        return{
            text: '向右滑',
            dialogVisible:false,
            loading:false,
            userid:'',
            ruleForm: {
                username: '',
                pwd:'',
            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            },
        }
    },
    mounted(){

    },
    methods:{
        //点击登录
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //console.log('弹出图片验证')
                    this.dialogVisible = true
                } else {

                    return false;
                }
            });
        },
        //图片验证验证通过
        onSuccess(){
            this.$refs.slideblock.reset();
            //登录后台
            this.login()
            this.dialogVisible = false
        },
        //登录
        async login(){
            this.loading = true
            let user = new FormData()
            user.append('username', this.ruleForm.username)
            user.append('pwd', this.ruleForm.pwd)
            let{data:{status,result}} = await this.$http.post(this.$api.login,user)
            this.loading = false
            if (status === 0) {
                // localStorage.setItem('token',token)
                this.$notify({
                    title: '成功',
                    message: result.msg,
                    type: 'success'
                });
                localStorage.setItem('userinfo',JSON.stringify(result.userinfo))
                localStorage.setItem('isLogin',true)
                this.$router.push('/')
            }
        },
        
    }
}
</script>
<style lang="scss" scoped>
    .login{
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        position: relative;
        background: url('../assets/login_bg.jpg')center top no-repeat;
        background-size: 100%;
        .title{
            text-align: center;
            padding-top: 100px;
            img{
                width: 100px;
                height: 100px;
            }
            
        }
        .user_name{
            font-size: 24px;
            color: #ffffff;
            padding: 30px 0;
        }
        .form{
            width: 430px;
            background-color: #ffffff;
            margin: 0 auto;
            padding: 37px 30px;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
            .tips{
                color: #999999;
                padding-bottom: 24px;
                text-align: center;
            }
            .submit{
                width: 100%;
                margin-top: 10px;
            }
        }
        .el-dialog__body{
            padding: 0 20px 40px 0;
        }
        .code{
            display: flex;
        }
        
    }
    
</style>    